<template>
  <div>
    <!-- // 网站导航模块↓ -->
    <MENU :isLogin="isLogin"></MENU>
    <!-- // 我的好友模块 -->
    <myFriends :isLogin="isLogin"></myFriends>
    <!-- 图钉 -->
    <affix :isLogin="isLogin"></affix>
    <!-- 背景动画 -->
    <div v-if="!isLogin" id="particles-js"></div>
    <!-- 博客列表 -->
    <bokeList v-if="!isLogin"></bokeList>
    <!-- 回到顶部 -->
    <el-backtop v-if="!isLogin" :right="20" :bottom="50" visibility-height="400"></el-backtop>

    <router-view></router-view>
    <div id="blog"></div>
    <div id="chat"></div>
    <div id="individual"></div>
    <div id="others"></div>
  </div>
</template>
<script lang="ts" setup>
// import stateChange from './stateChangeConfig'
// function changeState() {
//   stateChange.setState({ name: '张三', age: 18 })
// }
import { onMounted, onBeforeMount, reactive, ref } from 'vue'
// @ts-ignore
import particlesJS from './views/homePage/particles'
// @ts-ignore
import particlesConfig from './views/homePage/particles.json'
import myFriends from './views/myFriends/myFriends.vue'
import MENU from './views/MENU/MENU.vue'
import affix from './views/picAffix/picAffix.vue'
import bokeList from './views/bokeList/bokeList.vue'

let isLogin = ref<Boolean>(false)

// onBeforeMount阶段  dom还没创建  此时只能操作数据  不能操作dom
onBeforeMount(() => {
  //配置背景动画效果 在login页不需要展示
  // const router = useRouter()
  const loginReg = RegExp(/\/login/)
  if (window.location.pathname.match(loginReg)) {
    isLogin.value = true
  } else {
    isLogin.value = false
  }
})
//onMounted阶段  数据以渲染
onMounted(() => {
  if (!isLogin.value) {
    particlesJS('particles-js', particlesConfig)
  }
})
</script>

<style lang="scss" scoped>
// 左上角菜单按钮

// 背景动画
#particles-js {
  position: absolute;
  background-color: #f3f3f3;
  width: 100%;
  height: 1000%;
}

// 回到顶部
::v-deep .el-backtop {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 6px 6px 6px rgba(41, 41, 41, 0.1), -6px -6px 6px rgba(255, 255, 255, 1);
  transition: all 0.2s ease-out;
}
::v-deep .el-backtop:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(41, 41, 41, 0.1), 0 0 0 rgba(255, 255, 255, 0.8), inset 6px 6px 6px rgba(41, 41, 41, 0.1), inset -6px -6px 6px rgba(255, 255, 255, 1);
}
::v-deep .el-backtop:hover i {
  font-size: 26px;
}
</style>

<style>
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow: inset 0 0 1px 0 #185e40;
  border: 3px solid #f2f2f2;
  background-color: #d9d9d9;
}
</style>
